<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>

    <script>
        const data = {text: '老色批'}

        const app = document.querySelector('#app')

        const effect = () => {
            app.textContent = obj.text
        }

        // 使用一个Set集合收集所有的操作
        let b = new Set()

        // 使用proxy做对象属性劫持
        let obj = new Proxy(data, {                // proxy 结构，第一个参数是对象， 第二个是描述符
            // getter
            get(target, key) {
                console.log(target,key);
                b.add(effect)
                return target[key];
            },
            // setter
            set(target, key, value) {
                target[key] = value
                b.forEach(fn => fn())
                return true;
            }
        })

        effect()

        // obj.text = 100
        setTimeout(() => {
            obj.text = '老骚男'
        }, 2000)
    </script>
</body>
</html>